<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2.proxy监听数组</title>
  </head>
  <body>
    <script>
      let data = ["1", "2"];

      const proxyData = new Proxy(data, {
        get(target, key, proxyObj) {
          //过滤掉原型上的方法
          const ownKeys = Reflect.ownKeys(target);
            debugger
          if (ownKeys.includes(key)) {
            console.log("get", key);
          }else {
            return target[key];
          }

          const result = Reflect.get(target, key, proxyObj);
          return result; //
        },
        set(target, key, val, proxyObj) {
          // 重复的数据不处理
          debugger
          if (val === target[key]) {
            return true;
          }

          console.log("set", key, val);

          const result = Reflect.set(target, key, val, proxyObj);
          return result;
        },
        deleteProperty(target, key) {
          console.log("delete", key);

          const result = Reflect.deleteProperty(target, key);
          return result;
        }
      });

      proxyData.push("2")
    </script>
  </body>
</html>
